<template>
  <div class="yelppage">
    <div class="topinfo">
      <img src="@/assets/img/ai_top.png" alt="" class="topimg">
      <p>{{userInfo.name}}</p>
      <p>得分：{{mark}}</p>
    </div>
    <div class="topinfos">
      <p class="title">测 评 报 告</p>
      <p>EVALUATION REPORT</p>
      <p>学校：{{userInfo.school_name}}</p>
      <p>性别：{{userInfo.sex}}</p>
      <p>年级：{{userInfo.gradeName}}</p>
      <p>时间：{{nowTime}}</p>
    </div>
    <div class="testinfo">
      <div class="character">
        <div class="t_title">
          性格倾向测试
        </div>
        <div class="t_content">
          <div class="t_item" v-for="(item, index) in natureNameList" :key="++index">
            <div class="t_img">
              <div
                :id="'myChart' + index"
                :style="{width: '200px', height: '230px',margin:'0 auto',left:'-10px',top:'-52px'}"></div>
            </div>
            <p>{{item}}</p>
          </div>
        </div>
      </div>

      <div class="character">
        <div class="t_title">
          “六位一体”学习测试
        </div>
        <div class="t_content">
          <div class="t_item" v-for="(item, index) in integrationNameList" :key="++index">
            <div class="t_img1">
              <div
                :id="'myChart1' + index"
                :style="{width: '200px', height: '230px',margin:'0 auto',left:'-30px',top:'-58px'}"></div>
            </div>
            <p>{{item}}</p>
          </div>
        </div>
      </div>

      <div class="character">
        <div class="t_title">
          外部环境因素测试
        </div>
        <div class="t_content">
          <div class="t_item" v-for="(item, index) in externalFactorsNameList" :key="++index">
            <div class="t_img">
              <div
                :id="'myChart2' + index"
                :style="{width: '200px', height: '230px',margin:'0 auto',left:'-10px',top:'-52px'}"></div>
            </div>
            <p>{{item}}</p>
          </div>
        </div>
      </div>
      <div class="character">
        <div class="t_title">
          测试结果及意见
        </div>
        <div class="t_content">
          <div class="t_left">
            <ve-histogram :settings="chartSettings" :data="chartData"></ve-histogram>
          </div>

          <div class="t_right">
            <img src="@/assets/img/notices.png" alt="" class="t_r_img">
            <p class="t_r_notice">{{comment}}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

  export default {

    data () {
      this.chartSettings = {
        axisSite: { right: ['正确率'] },
        yAxisType: ['KMB', 'percent'],
        yAxisName: ['数值', '比率']
      }
      return {
        comment: '',
        nowTime: '',
        userInfo: this.$store.getters.getUserInfo,
        natureNameList: [], // 性格测试分组名称列表
        integrationNameList: [], // 六位一体分组名称列表
        externalFactorsNameList: [], // 环境外部因素分组名称列表
        mark: 0,
        height: '200px',
        chartData: {
          columns: ['测试类型', '正确得分', '错误得分', '正确率'],
          rows: [

          ]
        },

      }
    },

    updated () {
      this.natureList.forEach((item, index) => {
        let number = parseInt(index) + 1
        let myChart = this.$echarts.init(document.getElementById('myChart' + number))
        myChart.setOption(this.getOptions(item.right_mark, item.error_mark))
      })

      this.integrationList.forEach((item, index) => {
        ++index
        let number = parseInt(10) + index
        let myChart = this.$echarts.init(document.getElementById('myChart' + number))
        myChart.setOption(this.getOptions(item.right_mark, item.error_mark))
      })

      this.externalFactorsList.forEach((item, index) => {
        ++index
        let number = parseInt(20) + index
        let myChart = this.$echarts.init(document.getElementById('myChart' + number))
        myChart.setOption(this.getOptions(item.right_mark, item.error_mark))
      })
    },

    mounted () {

      setTimeout(() => {
        this.height = '300px'
      }, 3000)

      this.getChartData()
    },
    methods:{

      // 获取图表数据
      getChartData () {
        let that = this
        that.axios.get(that.$httpApi.httpUrl('/front/userInfo/getEntranceExamHistory')).then(function (response) {
          if (response.data.code === 1) {
            let dataList = response.data.data
            that.mark = dataList.mark
            that.comment = dataList.comment
            that.nowTime = dataList.create_date
            if (dataList) {
              if (dataList.natureList) {
                that.natureList = dataList.natureList
                that.natureNameList = dataList.natureListName
              }

              if (dataList.integrationList) {
                that.integrationList = dataList.integrationList
                that.integrationNameList = dataList.integrationListName
              }

              if (dataList.externalFactorsList) {
                that.externalFactorsList = dataList.externalFactorsList
                that.externalFactorsNameList = dataList.externalFactorsListName
              }

              dataList.countList.forEach(item => {
                that.chartData.rows.push({
                  '测试类型': item.labelName,
                  '正确得分': item.groupTypeMark,
                  '错误得分': item.groupTypeErrorMark,
                  '正确率': item.groupTypeRate
                })
              })

              // 加载柱状图数据
              that.loading = false
            }
          } else {
            that.$message.error(response.data.message)
          }
        }).catch((e) => {
          console.log(e)
        })
      },

      getOptions (rightMark, errorMark) {
        let option = {
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)'
          },
          legend: {
            orient: 'horizontal',
            x:'center',
            y:'80%',
            data: [ '正确','错误']
          },
          color:['#35e8d3','#ff7413'],
          series: [
            {
              name: '测试成绩',
              type: 'pie',
              radius: ['40%', '50%'],
              avoidLabelOverlap: false,
              label: {
                normal: {
                  show: false,
                  position: 'center',
                  formatter: function (argument) {
                    return argument.percent;
                  }
                },
                emphasis: {
                  show: true,
                  textStyle: {
                    fontSize: '30',
                    fontWeight: 'bold'
                  }
                }
              },
              labelLine: {
                normal: {
                  show: false
                }
              },
              data: [
                {value: rightMark, name: '正确'},
                {value: errorMark, name: '错误'}
              ]
            }
          ]
        }
        return option
      }
    }
  }

</script>

<style lang='scss' scoped>
  .yelppage{
    .topinfo{
      width: 1100px;
      margin: 0 auto;
      text-align: center;
      font-size: 22px;
      font-weight: 700;
      .topimg{
        display: block;
        width: 360px;
        height: 120px;
        margin: 0 auto;
      }
      p{
        margin-top: 10px;
      }
    }
    .topinfos{
      margin: 20px auto;
      padding: 10px 0 20px;
      display: flex;
      background-color: #ed2828;
      color: #fff;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      p{
        margin-top: 10px;
      }
      .title{
        font-size: 32px;
        margin-bottom: -7px;
      }
    }
    .testinfo{
      width: 1100px;
      margin: 0 auto;
      .character{

      }
    }
  }
  .t_title{
    background-color: #ff8d6e;
    height: 40px;
    line-height: 40px;
    box-sizing: border-box;
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    padding-left: 20px;
  }
  .t_content{
    padding: 10px;
    display: flex;
    justify-content: space-around;
    .t_left{
      width: 50%;
    }
    .t_right{
      width: 50%;
      position: relative;
      .t_r_img{
        display: block;
        width: 100%;
        height: 80%;
      }
      .t_r_notice{
        position: absolute;
        top: 90px;
        left: 158px;
        width: 330px;
        line-height: 30px;
      }
    }
    .t_item{
      width: 200px;
      text-align: center;
      padding: 10px;
      box-sizing: border-box;
      .t_img1{
        background-color: #efefef;
        margin-bottom: 10px;
        height: 140px;
        width: 140px;
        box-sizing: border-box;
      }

      .t_img{
        background-color: #efefef;
        margin-bottom: 10px;
        height: 180px;
        box-sizing: border-box;
      }

    }
  }

</style>
